<template>
  <!-- <el-upload
    ref="upload"
    class="upload-demo"
    action
    :http-request="handleUpload"
    :auto-upload="false"
    multiple
    :on-exceed="handleExceed"
    :file-list="fileList"
    :on-change="onChangeFile"
    :on-remove="handleRemove"
    :on-preview="handlePreview"
    :before-remove="beforeRemove"
  > -->
    <!-- <el-button
      slot="trigger"
      :disabled="type !== 'view' ? false : true"
      size="small"
      type="primary"
      >选取文件</el-button
    >
    <el-button
      :disabled="type !== 'view' ? false : true"
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="submitUpload"
      >上传到服务器</el-button
    > -->
  <!-- </el-upload> -->
  <div></div>
</template>
<script type="text/ecmascript-6">
import ossClient from '@/utils/oss';
export default {
  name: 'Upload',
  data () {
    return {
      realFileList: [],
      // 上传文件列表，el-upload使用，临时保存数据。
      fileList: [
        // { name: 'aaa', url: 'image/196b62fd-fc70-4634-9bca'}
      ]
    }
  },
  methods: {
    /**
     * 初始化
     */
    async init () {
      //获取阿里云token  这里是后台返回来的数据
      const aliyun = {
        Region: '你的Region  注意 这个只要 空间名 不要 http:// 和 .aliyunoss.com !!',
        AccessKeyId: '你的AccessKeyId',
        AccessKeySecret: '你的AccessKeySecret',
        Bucket: '你的Bucket',
        SecurityToken: '你的SecurityToken'
      };
      const { Region, AccessKeyId, AccessKeySecret, Bucket, SecurityToken } = aliyun && aliyun.data;
      this.uploadConf.region = Region;
      this.uploadConf.accessKeyId = AccessKeyId;
      this.uploadConf.accessKeySecret = AccessKeySecret;
      this.uploadConf.bucket = Bucket;
      this.uploadConf.stsToken = SecurityToken;
    },

    /**
     * 阿里云OSS上传
     */
    uploadHttp ({ file }) {
      const { imgName } = 'ALIOSS_IMG_';
      const fileName = `${imgName}/${Date.parse(new Date())}`;  //定义唯一的文件名
      ossClient(this.uploadConf).put(fileName, file, {
        'ContentType': 'image/jpeg'
      }).then(({ res, url, name }) => {
        if (res && res.status == 200) {
          console.log(`阿里云OSS上传图片成功回调`, res, url, name);
        }
      }).catch((err) => {
        console.log(`阿里云OSS上传图片失败回调`, err);
      });
    },

    /**
     * 图片限制
     */
    beforeAvatarUpload (file) {
      const isJPEG = file.name.split('.')[1] === 'jpeg';
      const isJPG = file.name.split('.')[1] === 'jpg';
      const isPNG = file.name.split('.')[1] === 'png';
      const isLt500K = file.size / 1024 / 500 < 2;
      if (!isJPG && !isJPEG && !isPNG) {
        this.$msg.error('上传图片只能是 JPEG/JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$msg.error('单张图片大小不能超过 500KB!');
      }
      return (isJPEG || isJPG || isPNG) && isLt500K;
    },

    /**
     * 移除图片
     */
    handleRemove (file, fileList) {
      console.log(`移除图片回调`, fileList);
    }
  }
};
</script>